<template>
  <div class="show-list">
    <van-nav-bar
      
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="header">
      <img :src="show.cover" alt="" />
      <h3>{{ show.name }}</h3>
      <div class="nick">
        <img :src="show.nickpic" alt="" />
        <span>{{ show.nickname }}</span>
      </div>
    </div>
    <div class="program">
      <span>{{ show.bodydesc }}</span>
    </div>
    <div class="showsList">
      <span>歌曲列表(共有{{ show.songarray }}首歌曲）</span><br />
      <div v-for="(item, index) in songs" :key="index">
        <div class="list">
          <div>{{ item.name }}</div>
          <div>{{ item.artists[0].name }}</div>
          <div>{{ item.album.name }}</div>
        </div>
      </div>
      <li
        v-for="(item, index) in showlist"
        :key="index"
        @click="selectItem(item)"
      ></li>
    </div>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      show: {
        cover: "", 
        name: "", 
        nickname: "", 
        nickpic: "", 
        bodydesc: "", 
        songarray: "", 
        songname: "", 
      },
      showlist: [],
      shownum: 0, 
      list: [],
      artists: [],
      songs: [],
      loading: false,
      finished: false,
    };
  },
  created() {
    this.getShowData();
  },
  methods: {
    getShowData() {
      this.$request("get", "/dj/program/detail", {
        id: this.$route.params.id,
      }).then((res) => {
        this.show.cover = res.program.coverUrl;
        this.show.nickname = res.program.dj.nickname;
        this.show.nickpic = res.program.dj.avatarUrl;
        this.show.name = res.program.name;
        this.show.bodydesc = res.program.description;
        this.show.songarray = res.program.trackCount;
        this.songs = res.program.songs;
        this.artists = res.program.songs.artists;
      });
    },
    selectItem(item) {
      const id = item.id;
      console.log(id);
      this.$router.push({
        name: "ShowList",
        params: {
          id: id,
        },
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onLoad() {
      setTimeout(() => {
        this.list = this.list.concat(this.showlist.splice(0, 10));
        this.loading = false;
        if (this.list.length >= this.shownum) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};
</script>
  <style scoped>
.header > img {
  width: 20%;
}
.nick {
  overflow: hidden;
  display: flex;
  justify-content: center; 
  align-items: center;
  margin-bottom: 1rem;
}
.nick > img {
  width: 2rem;
  border-radius:18px;
  margin-right: 0.5rem;
}
.program {
  padding: 1rem;
  text-align: left;
  text-indent: 2rem;
}
.showsList {
  background-color: rgba(235, 197, 235, 0.467);
}
.list {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 1rem;
  padding-bottom: 1rem;
}
.list > div {
  width: 50%;
  margin-top: 1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  
}
</style>